<template>
  <div class="param-main">
    <!-- <vxe-toolbar ref="xToolbar" :loading="loading">
      <template #buttons>
        <vxe-button
          status="primary"
          content="新增区域经销商"
          @click="insertEvent"
        ></vxe-button>
      </template>
    </vxe-toolbar> -->
    <vxe-table
      border
      show-overflow
      resizable
      keep-source
      ref="xTable"
      row-id="id"
      height="200px"
      :edit-config="{
        trigger: 'click',
        mode: 'row',
        showUpdateStatus: true,
        showInsertStatus: true
      }"
      :data="listData"
    >
      <vxe-column field="cityId" title="区域名称"  :edit-render="{}">
        <template #default="{ row }">
          <span>{{ formatterFiled(row.cityId.toString(),'code','name',regionalList) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.cityId" placeholder="请选择区域名称" filterable clearable   :disabled="title == '经销商详情'">
            <vxe-option
              v-for="item in regionalList"
              :key="item.code"
              :value="item.code"
              :label="item.name"
            ></vxe-option>
          </vxe-select>
          <!-- <vxe-input v-model="row.cityId" type="text"></vxe-input> -->
        </template>
      </vxe-column>
      <vxe-column
        field="name"
        title="配件名称"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <vxe-input
            v-model="row.name"
            type="text"
            :disabled="title == '经销商详情'"
          ></vxe-input>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script>
import {
  getSysRegionList,
} from '@/api/carLine'
export default {
  name: 'applyMain',
  props: {
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      loading: false,
      listData: [],
      regionalList: [],
      supplierList: [],
      selection: [],
      serachForm: {
        code: '',
        type: 'province'
      },
      pageInfo: {
        page: 1,
        size: 100,
        total: 0
      },
      brands: [],
      typeList: ['province', 'city', 'area', 'street'],
      typeDataList: [
        {
          code: 'province',
          value: '省级'
        },
        {
          code: 'city',
          value: '城市'
        },
        {
          code: 'area',
          value: '区县'
        },
        {
          code: 'street',
          value: '乡镇/街道'
        }
      ],
      saveType: 'update'
    }
  },
  created() {},
  mounted() {
    this.getRegionalList()
  },
  methods: {
     /**
     * 设置初始化值
     */
    initTable(val){
      this.listData = val;
    },
    /**
     * 获取码值
     */
    formatterFiled(cellValue,key,val,list) {
      let item = list.find((item) => item[key] === cellValue)
      return item ? item[val] : ''
    },
    /**
     * 插入数据
     */
    async insertEvent() {
      const $table = this.$refs.xTable
      const newRecord = {}
      const { row: newRow } = await $table.insert(newRecord)
      await $table.setActiveRow(newRow)
    },
    /**
     * 获取区域数据
     */
    getRegionalList() {
      let param = {
        page: 1,
        size: 100,
        type: 'province'
      }
      getSysRegionList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.regionalList = data.content
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    }
  }
}
</script>
